<template>
  <div class="forget">
    <div class="forget-header flex-y-center">
      <div
        class="forget-header_title flex-y-center pointer"
        @click="handleGoBack"
      >
        <el-icon><ArrowLeft /></el-icon>
        <span class="ml-sm">返回登录</span>
      </div>
      <div class="forget-header_content">忘记密码</div>
    </div>

    <div class="forget-content_template">
      <div class="forget-content">
        <c-time-line :active="active" :list="['验证身份', '设置密码', '完成']"/>
        <c-verify-identity @change="handleModuleChange" v-show="active === 0" />
        <c-change-password @change="handleModuleChange" v-show="active === 1" />
        <c-change-success @change="handleModuleChange" v-show="active === 2" />
        <div class="forget-content_tips">
          <div>特别说明：</div>
          <div>1.可通过手机号找回，请确认您手机在身边；</div>
          <div>2.如果长时间未接收到手机短信，请查看您的拦截短信;</div>
          <div>3.无法通过以上方式找回登录密码时，请及时联系客服人员协助。</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ArrowLeft } from "@element-plus/icons-vue";
import cTimeLine from "@/components/TimeLine/index.vue";
import cVerifyIdentity from "./components/VerifyIdentity.vue";
import cChangePassword from "./components/ChangePassword.vue";
import cChangeSuccess from "./components/ChangeSuccess.vue";
const router = useRouter();
const active = ref(0);
const handleModuleChange = () => {
  if (active.value < 2) {
    active.value += 1;
  } else if (active.value === 2) {
    router.go(-1)
  }
};
const handleGoBack = () => {
  router.go(-1);
};
</script>
<style lang="less" scoped>
.forget {
  width: 62.5vw;
  margin: auto;
  .forget-header {
    width: 100%;
    margin-top: 10px;
    background: #fff;
    padding: 18px 20px;
    border-radius: 3px;
    .forget-header_title {
      color: #575757;
      font-size: 14px;
      font-weight: 400;
    }
    .forget-header_content {
      font-weight: bold;
      font-size: 20px;
      color: #202020;
      text-align: center;
      flex: 1;
      width: 100%;
    }
  }
  .forget-content_template {
    width: 100%;
    background: #fff;
    margin-top: 10px;
    border-radius: 3px;
    padding: 18px 20px;
    .forget-content {
      margin: 80px auto 70px auto;
      width: 40%;
      .forget-content_tips {
        margin-top: 70px;
        background: rgba(0, 0, 0, 0.02);
        padding: 12px 30px;
        font-size: 12px;
        color: #8c8c8c;
        line-height: 26px;
      }
    }
  }
}
</style>